<template>
    <div class="table-setting-box">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="列设置"
            placement="top"
            :disabled="toolTipDisabled"
        >

            <el-icon :size="20" ref="buttonRef">
                <Tools />
            </el-icon>

        </el-tooltip>
        <el-popover
            ref="popoverRef"
            popper-class="table-colunm-popver"
            :width="350"
            :virtual-ref="buttonRef"
            trigger="click"
            title=""
            virtual-triggering
        >
            <div class="popver-content" v-if="handleColumnData">
                <div class="head">
                    <el-checkbox v-model="showAllColunm" @change="onEnd" label="列展示" />
                    <el-checkbox v-model="handleData.showIndex" @change="onEnd" label="序号列" />
                    <el-checkbox v-model="handleData.showSelection" @change="onEnd" label="勾选列"  />
                    <el-button class="btn" type="primary" link @click="resetClick">{{ t('page.user.reset') }}</el-button>
                </div>
                <div class="dragge-box">
                    <draggable @end="onEnd" v-model="handleData.list" item-key="name" handle=".handle">
                        <template #item="{element: item}">
                            <div class="item-box">
                                <div class="left">
                                    <Icon class="icon handle" icon="mdi:cursor-move"/>
                                    <el-checkbox v-model="item.show" @change="onEnd" :label="t(item.title)" />
                                </div>
                                <div class="right">
                                    <el-icon :color="item.fixed && item.fixedDir === 'left'?'red':'black'" :size="16" class="icon" @click="fixedClick(item,'left')">
                                        <Back />
                                    </el-icon>
                                    <el-icon :color="item.fixed && item.fixedDir === 'right'?'red':'black'" :size="16" class="icon"  @click="fixedClick(item,'right')">
                                        <Right />
                                    </el-icon>
                                </div>
                            </div>
                        </template>

                    </draggable>

                </div>
            </div>
        </el-popover>
    </div>
</template>

<script setup>
import { reactive, ref, watch,computed } from "vue";
import {Edit,Tools,Back,Right} from '@element-plus/icons-vue';
import draggable from 'vuedraggable'
import Icon from '@/components/Icon/Icon.vue'
import {cloneDeep} from "lodash-es"
import { forEach } from "@/utils/tools";
import { useI18n } from '@/hooks/usel18n';
defineOptions({
  name: "TableSetting",
});
const props = defineProps({
  handleColumnData: {
    type: Object,
    default: function() {
      return null
    },
  },
})
const { t } = useI18n();
const emit = defineEmits(['change'])
const buttonRef = ref();
const toolTipDisabled = ref(false);
const checked1 = ref(false);
const listData = ref([{ name: "John", text: "", id: 0 },
  { name: "Joao", text: "", id: 1 },
  { name: "Jean", text: "", id: 2 }]);

const showAllColunm = computed({
  get() {
    if(props.handleColumnData) {
      return props.handleColumnData.list.every((item) => {
        return item.show
      })
    }
    return true;

  },
  set(newValue) {
    if(newValue) {
      handleData.value.list.forEach(element => {
        element.show = true;
      });
    }else{
      handleData.value.list.forEach(element => {
        element.show = false;
      });
    }
    onEnd();

  }
});

function resetClick() {
  handleData.value.list.forEach(element => {
    element.show = true;
  });
  onEnd();
}


const handleData = ref(cloneDeep(props.handleColumnData))

watch(props.handleColumnData,(val) => {
  handleData.value = cloneDeep(val)
})

function onEnd(e) {
  console.log('onEnd',e);
  emit('change',handleData.value)
}

function fixedClick(item,dir) {
  if(dir === 'left') {
    if(item.fixed) {
      if(item.fixedDir === 'left') {
        item.fixed = false;
      }else if(item.fixedDir === 'right') {
        item.fixed = true;
        item.fixedDir = 'left';
      }
    }else{
      item.fixed = true;
      item.fixedDir = 'left';
    }

  }else if(dir === 'right') {
    if(item.fixed) {
      if(item.fixedDir === 'left') {
        item.fixed = true;
        item.fixedDir = 'right';
      }else if(item.fixedDir === 'right') {
        item.fixed = false;
      }
    }else{
      item.fixed = true;
      item.fixedDir = 'right';
    }
  }
  emit('change',handleData.value)
}

</script>

<style lang="scss">
.table-colunm-popver {
  .popver-content {
    .head {
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--el-border-color);
      .btn {
        margin-left: auto;
      }
    }
    .dragge-box{
      .item-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        >.left {
          display: inline-flex;
          align-items: center;
          >.icon {
            margin-right: 6px;
            cursor: move;
          }
        }
        >.right {
          display:inline-flex;
          align-items: center;
          .icon {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.table-setting-box {
  cursor: pointer;
}
</style>


